<script setup lang="ts">
import { reactive } from 'vue'
import {
  NForm,
  NFormItem,
  NInputNumber,
  NColorPicker,
  NScrollbar,
  NButton
} from 'naive-ui'
import { emit } from '@tauri-apps/api/event'

let config = {} as Any
try {
  config = JSON.parse(localStorage.getItem('--cross') as string) || {}
} catch {
  config = {}
}

const crossSetting = reactive({
  size: config.size || 24,
  width: config.width || 2,
  gap: config.gap || 6,
  color: config.color || '#FF0000FF',
  offsetX: config.offsetX || 0,
  offsetY: config.offsetY || 0
})
function onSave () {
  localStorage.setItem('--cross', JSON.stringify({
    size: crossSetting.size,
    width: crossSetting.width,
    gap: crossSetting.gap,
    color: crossSetting.color,
    offsetX: crossSetting.offsetX,
    offsetY: crossSetting.offsetY
  }))
  emit('setting-change', { ...crossSetting })
}
</script>

<template>
  <div class="overlay">
    
  </div>
</template>

<style scoped lang="less">
.overlay {
  width: 120px;
  height: 120px;
  box-sizing: border-box;
  overflow: hidden;
  cursor: move;
}</style>
